<template>
  <!-- 新增部门的弹层 -->
  <el-dialog :title="showTitle" :visible="showDialog" @close="btnclose">
    <!-- 表单组件  el-form   label-width设置label的宽度   -->
    <!-- 匿名插槽 -->
    <el-form
      ref="deptRef"
      v-loading="loading"
      label-width="120px"
      :model="formdata"
      :rules="rules"
    >
      <el-form-item label="部门名称" prop="name">
        <el-input
          v-model="formdata.name"
          style="width: 80%"
          placeholder="1-50个字符"
        />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input
          v-model="formdata.code"
          style="width: 80%"
          placeholder="1-50个字符"
        />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select
          v-model="formdata.manager"
          style="width: 80%"
          placeholder="请选择"
          @focus="getEmployeeSimple"
        >
          <el-option v-for="item in employdata" :key="item.id" :value="item.username" :label="item.username"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input
          v-model="formdata.introduce"
          style="width: 80%"
          placeholder="1-300个字符"
          type="textarea"
          :rows="3"
        />
      </el-form-item>
    </el-form>
    <!-- el-dialog有专门放置底部操作栏的 插槽  具名插槽 -->
    <el-row slot="footer" type="flex" justify="center">
      <!-- 列被分为24 -->
      <el-col :span="6">
        <el-button type="primary" size="small" @click="btndept()">确定</el-button>
        <el-button size="small" @click="$emit('update:showDialog',false)">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { getDepartments, addDepartments, getDepartDetail, updateDepartments } from '@/api/department.js'
import { getEmployeeSimple } from '@/api/employees.js'
export default {
  name: 'AddDept',
  components: {},
  props: {
    // 需要传入一个props变量来控制 显示或者隐藏
    showDialog: {
      type: Boolean,
      default: false
    },
    // value: {
    //   type: Boolean,
    //   default: false
    // },
    // 当前选中的部门数据
    treeNode: {
      type: Object,
      required: true
    }

  },
  data() {
    const checkNameRepeat = async(rule, value, callback) => {
      // 方式一 是否相同字部门自定义验证规则
    //   if (!this.treeNode.children) {
    //     return callback()
    //   }
    //   const brothers = this.treeNode.children
    //   const f = brothers.find(item => item.name === value)
    //   if (f) {
    //     callback(new Error('存在相同名称的兄弟部门'))
    //   } else {
    //     callback()
    //   }
    //   方式二
      const { depts } = await getDepartments()
      let brothers
      if (this.formdata.id) {
        //   编辑
        brothers = depts.filter((item) => {
          return this.treeNode.pid && item.id !== this.treeNode.id
        })
      } else {
        //   新增
        brothers = depts.filter(t => t.id === this.treeNode.id)
      }
      const f = brothers.find(t => t.name === value)
      if (f) {
        callback(new Error('存在相同名称的兄弟部门'))
      } else {
        callback
      }
    }
    //   是否有相同code自定义验证
    const checkedCodeRepeat = async(rule, value, callback) => {
      let { depts } = await getDepartments()
      if (this.formdata.id) {
        depts = depts.filter(t => t.id !== this.treeNode.id)
      }
      const f = depts.some(item => item.code === value)
      if (f) {
        callback(new Error('存在相同code的部门'))
      } else {
        callback
      }
    }
    return {
      loading: false, // loading的状态
      employdata: [], // 员工的简单列表数据
      formdata: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门领导
        introduce: '' // 部门介绍
      }, // 表单数据
      // 表单验证规则
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: 'blur' },
          { validator: checkNameRepeat, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: 'blur' },
          { validator: checkedCodeRepeat, trigger: 'blur' }
        ],
        manager: [{ required: true, message: '部门负责人不能为空', trigger: 'blur' }],
        introduce: [{ required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { trigger: 'blur', min: 1, max: 300, message: '部门介绍要求1-50个字符' }]
      }
    }
  },
  computed: {
    showTitle() {
      return this.formdata.id ? '编辑部门' : '新增部门'
    }
  },
  created() {

  },
  methods: {
    //   获取员工的简单列表
    async getEmployeeSimple() {
      this.employdata = await getEmployeeSimple()
    },
    // 表单提交
    btndept() {
      this.loading = true
      this.$refs.deptRef.validate(async isok => {
        if (isok) {
          // 编辑
          if (this.formdata.id) {
            await updateDepartments(this.formdata)
          } else {
            // 新增
            await addDepartments({ ...this.formdata, pid: this.treeNode.id })
            this.$message({
              message: '添加成功',
              type: 'success',
              showClose: true,
              duration: 3000
            })
          }
        } else {
          this.$message({
            message: '添加失败',
            type: 'error',
            showClose: true,
            duration: 3000
          })
        }
        // this.$emit('input', false)
        // 向父组件传值
        this.$emit('addDept')
        this.loading = false
        // this.btnclose()
        this.$emit('update:showDialog', false)
      })
    },
    // 关闭弹层
    btnclose() {
      this.$emit('update:showDialog', false)
      this.$refs.deptRef.resetFields()
    },
    // 清空表单数据
    cleardata() {

    },
    // 编辑部门
    async getDepartDetail(id) {
      const formdata = await getDepartDetail(id)
      this.formdata = formdata
    }

  }
}
</script>

<style lang="less" scoped>
</style>
